Fox 3.0 Router 过渡动画

过渡动画

在前端应用越来越注重用户的体验，因此页面切换的过渡动画也变得不可或缺。fox router提供了内置的动画支持，例如append/remove, show/hide两组导航动作。 通过在fox-router-view设置对应的参数，即可开启过渡动画效果。

例子

 <fox-router-view class="fox-card-views" view-class="fox-card-view"
                                 view-active-class="fox-card-view-active"
                                 view-deactive-class="fox-card-view-deactive"
                                 transition = "true"
                                 transition-name = "fox-card-view-trans"
                                :multi="true"></fox-router-view>

过渡动画属性说明

参数	类型	默认值	说明
css	boolean	true	true支持样式控制动画，false则通过函数控制动画
transition	boolean	false	是否开启过渡动画
transition-name	string		进入过渡的开始状态
enter-class-from	string		进入过渡的开始状态
enter-active-class	string		进入过渡生效时的状态
enter-to-class	string		进入过渡的结束状态
leave-class-from	string		离开过渡的结束状态
leave-active-class	string		离开过渡生效时的状态
leave-to-class	string		离开过渡的结束状态
show-class-from	string		显示过渡的开始状态
show-active-class	string		实现过渡生效时的状态
show-to-class	string		显示过渡的结束状态
hide-class-from	string		隐藏过渡的结束状态
hide-active-class	string		隐藏过渡生效时的状态
hide-to-class	string		隐藏过渡的结束状态

transition-name是一个设置过渡动画样式的简约方法，比如设置transition-name = "fox-view-trans"，那么控件就会把过渡样式自动设置为如下：

enter-class-from="fox-view-trans-enter-from" enter-active-class="fox-view-trans-enter-active" enter-to-class="fox-view-trans-enter-to" leave-class-from="fox-view-trans-leave-from" leave-active-class="fox-view-trans-leave-active" leave-to-class="fox-view-trans-leave-to" show-class-from="fox-view-trans-show-from" show-active-class="fox-view-trans-show-active" show-to-class="fox-view-trans-show-to" hide-class-from="fox-view-trans-hide-from" hide-active-class="fox-view-trans-hide-active" hide-to-class="fox-view-trans-hide-to"